<template>
    <div>
        <div class="button-box clearflex">
            <el-button @click="addMenu('0')" type="primary"> 新增根菜单</el-button>
        </div>
        <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
        <el-table :data="tableData" border row-key="ID" stripe>
            <el-table-column label="ID" min-width="100" prop="ID"></el-table-column>
            <el-table-column label="路由Name" min-width="160" prop="name"></el-table-column>
            <el-table-column label="路由Path" min-width="160" prop="path"></el-table-column>
            <el-table-column label="是否隐藏" min-width="100" prop="hidden">
                <template slot-scope="scope">
                    <span>{{scope.row.hidden?"隐藏":"显示"}}</span>
                </template>
            </el-table-column>
            <el-table-column label="父节点" min-width="90" prop="parentId"></el-table-column>
            <el-table-column label="排序" min-width="70" prop="Sort"></el-table-column>
            <el-table-column label="文件路径" min-width="360" prop="component"></el-table-column>
            <el-table-column label="展示名称" min-width="120" prop="authorityName">
                <template slot-scope="scope">
                    <span> {{scope.row.meta.title}}</span>
                </template>
            </el-table-column>
            <el-table-column label="图标" min-width="140" prop="authorityName">
                <template slot-scope="scope">
                    <i :class="`el-icon-${scope.row.meta.icon}`"></i>
                    <span>{{scope.row.meta.icon}}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="300">
                <template slot-scope="scope">
                    <el-button 
                      size="small" 
                      type="primary" 
                      icon="el-icon-edit"
                      @click="addMenu(scope.row.ID)"
                    >添加子菜单</el-button>
                    <el-button
                        size="small"
                        type="primary"
                        icon="el-icon-edit"
                        @click="editMenu(scope.row.ID)"
                        >编辑</el-button>
                    <el-button
                        size="small"
                        type="danger"
                        icon="el-icon-delete"
                        @click="deleteMenu(scope.row.ID)"
                        >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form
              :inline="true"
              :model="form"
              label-position="top"
              label-width="85px"
              ref="menuForm">
              <el-form-item label="路由name" prop="path" style="width:30%">
                  <el-input
                    autocomplete="off"
                    placeholder="唯一英文字符串"
                    v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item prop="path" style="width:30%">
                  <div style="display:inline-block" slot="label">
                      路由path
                      <el-checkbox style="float:right;margin-left:20px;" v-model="checkFlag">添加参数</el-checkbox>
                  </div>
                  <el-input
                    autocomplete="off"
                    placeholder="建议只在后方拼接参数"
                    v-model="form.path"></el-input>
              </el-form-item>
              <el-form-item label="是否隐藏" style="width:30%">
                  <el-select placeholder="是否在列表隐藏" v-model="form.hidden">
                      <el-option :value="false" label="否"></el-option>
                      <el-option :value="true" label="是"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="父节点Id" style="width:30%">
                  <el-cascader
                    :disabled="!this.isEdit"
                    :options="menuOption"
                    :props="{ checkStrictly: true,label:'title',value:'ID',disabled:'disabled',emitPath:false}"
                    :show-all-levels="false"
                    filterable
                    v-model="form.parentId"></el-cascader>
              </el-form-item>
              <el-form-item label="文件路径" prop="component" style="width:60%">
                  <el-input autocomplete="off" v-model="form.component"></el-input>
                  <span style="font-size:12px;margin-right:12px;">如果菜单包含子菜单，请创建router-view二级路由页面或</span>
                  <el-button size="mini" >点我设置</el-button>
              </el-form-item>
              <el-form-item label="展示名称" prop="meta.title" style="width:30%">
                  <el-input autocomplete="off" v-model="form.meta.title"></el-input>
              </el-form-item>
              <el-form-item label="图标" prop="meta.icon" style="width:30%">
                  <icon :meta="form.meta">
                      <template slot="prepend">el-icon-</template>
                  </icon>
              </el-form-item>
              <el-form-item label="排序标记" prop="Sort" style="width:30%">
                  <el-input autocomplete="off" v-model.number="form.Sort"></el-input>
              </el-form-item>
              <el-form-item label="keepAlive" prop="meta.keepAlive" style="width:30%">
                  <el-select placeholder="是否keepAlive缓存页面" v-model="form.meta.keepAlive">
                      <el-option :value="false" label="否"> </el-option>
                      <el-option :value="true" label="是"> </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="closeTab" prop="meta.closeTab" style="width:30%">
                  <el-select placeholder="是否自动关闭tab" v-model="form.meta.closeTab">
                      <el-option :value="false" label="否"></el-option>
                      <el-option :value="true" label="是"></el-option>
                  </el-select>
              </el-form-item>
            </el-form>
            <div class="warning">新增菜单需要在角色管理内配置权限才可以使用</div>
            <div>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-edit"
                  @click="addParameter(form)"
                  >新增菜单参数</el-button>
                  <el-table :data="form.parameters" stripe style="width: 100%">
                      <el-table-column prop="type" label="参数类型" width="180">
                          <template slot-scope="scope">
                              <el-select v-model="scope.row.type" placeholder="请选择">
                                  <el-option key="query" value="query" label="query"></el-option>
                                  <el-option key="params" value="params" label="params"></el-option>
                              </el-select>
                          </template>
                      </el-table-column>
                      <el-table-column prop="key" label="参数key" width="180">
                          <template slot-scope="scope">
                              <div>
                                  <el-input v-model="scope.row.key"></el-input>
                              </div>
                          </template>
                      </el-table-column>
                      <el-table-column prop="value" label="参数值">
                          <template slot-scope="scope">
                                <div>
                                    <el-input v-model="scope.row.value"></el-input>
                                </div>
                          </template>
                      </el-table-column>
                      <el-table-column>
                          <template slot-scope="scope">
                              <div>
                                  <el-button
                                    type="danger"
                                    size="small"
                                    icon="el-icon-delete"
                                    @click="deleteParameter(form.parameters,scope.$index)"
                                    >删除</el-button>
                              </div>
                          </template>
                      </el-table-column>
                  </el-table>
            </div>
            <div class="dialog-footer" slot="footer">
                <el-button >取消</el-button>
                <el-button @click="enterDialog" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { 
    getMenuList,
    addBaseMenu,
    updateBaseMenu,
    getBaseMenuById,
    deleteBaseMenu,
} from "@/api/menu";
import infoList from "@/mixins/infoList";
import icon from "@/view/superAdmin/menu/icon";
export default {
    name: "Menus",
    mixins: [infoList],
    data(){
        return {
            checkFlag: false,
            listApi: getMenuList,
            dialogFormVisible: false,
            dialogTitle: "新增菜单",
            menuOption:[
                {
                    ID: "0",
                    title: "根菜单"
                }
            ],
            form: {
                ID: 0,
                path: "",
                name:"",
                hidden: "",
                parentId: "",
                component:"",
                meta: {
                    title: "",
                    icon: "",
                    defaultMenu: false,
                    closeTab: false,
                    keepAlive: false
                },
                parameters: []
            },
            isEdit: false
        }
    },
    components:{
        icon
    },
    methods: {
        addParameter(form) {
            if (!form.parameters){
                this.$set(form,"parameters",[]);
            }
            form.parameters.push({
                type: "query",
                key: "",
                value: ""
            })
        },
        deleteParameter(parameters, index){
            parameters.splice(index, 1);
        },
        setOptions(){
            this.menuOption = [
                {
                    ID: "0",
                    title: "根目录"
                }
            ];
            this.setMenuOptions(this.tableData, this.menuOption, false);
        },
        setMenuOptions(menuData, optionsData, disabled){
            menuData && menuData.map(item => {
                if (item.children && item.children.length){
                    const option = {
                        title: item.meta.title,
                        ID: String(item.ID),
                        disabled: disabled || item.ID == this.form.ID,
                        children: []
                    };
                    this.setMenuOptions(
                        this.children,
                        option.children,
                        disabled || item.ID == this.form.ID
                    );
                    optionsData.push(option);
                } else {
                    const option = {
                        title: item.meta.title,
                        ID: String(item.ID),
                        disabled: disabled ||item.ID == this.form.ID
                    };
                    optionsData.push(option);
                }
            });
        },
        //删除菜单
        deleteMenu(ID) {
            this.$confirm("此操作将永久删除所有该角色下菜单，是否继续？","提示",{
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warnging"
            }).then(async () => {
                const res = await deleteBaseMenu({ ID });
                if (res.Code == 0 ){
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                    if (this.tableData.length == 1){
                        this.page--;
                    }
                    this.getTableData();
                }
            })
            .catch(() =>{
                this.$message({
                    type: "info",
                    message: "已取消删除"
                })
            } 
            )
        },
        // 初始化弹窗内表格方法
        initForm(){
            this.checkFlag = false;
            this.$refs.menuForm.resetFields();
            this.form = {
                ID: 0,
                path: "",
                name: "",
                hidden: "",
                parentId: "",
                component: "",
                meta: {
                    title: "",
                    icon: "",
                    defaultMenu: false,
                    keepAlive: ""
                }
            }
        },
        async enterDialog(){
            this.$refs.menuForm.validate(async valid => {
                if (valid){
                    let res;
                    if (this.isEdit){
                        res = await updateBaseMenu(this.form);
                    } else {
                        res = await addBaseMenu(this.form);
                    }
                    console.log(res)
                    if (res.Code == 0){
                        this.$message({
                            type: "success",
                            message: this.isEdit ? "编辑成功" : "添加成功!"
                        });
                        this.getTableData();
                    }
                    this.initForm();
                    this.dialogFormVisible = false;
                }
            });
        },
        // 添加菜单方法, id为  0 则为添加根菜单
        addMenu(id){
            this.dialogTitle = "新增菜单";
            this.form.parentId = String(id);
            this.isEdit = false;
            this.setOptions();
            this.dialogFormVisible = true;
        },
        // 修改菜单方法
        async editMenu(id){
            this.dialogTitle = "编辑菜单";
            const res = await getBaseMenuById({ id });
            this.form = res.Data.menus["0"];
            this.isEdit = true;
            this.setOptions();
            this.dialogFormVisible = true;
        }
    },
    async created(){
        this.pageSize = 999;
        await this.getTableData();
    }
}
</script>